<template>
    <div style="width: 100%">
        <div style="margin-left: 250px">
            <span style="margin-left: 20px">选择店铺：</span>
            <el-select v-model="store.storeid" placeholder="请选择" style="width: 300px;margin-left: 50px" id="select"
                       @change="reason()">
                <el-option
                        v-for="item in store"
                        :key="item.value"
                        :label="item.name"
                        :value="item.id" id="option">
                </el-option>
            </el-select>
            <div style="display: flex;justify-content: space-around;width: 600px" class="messsageList">
                <ul style="background-color: #C23531">
                    <li>今日账单总额</li>
                    <li>$<span>{{today}}</span></li>
                </ul>
                <ul style="background-color: #4DA5F5">
                    <li>本周帐单总额</li>
                    <li>$<span>{{toweek}}</span></li>
                </ul>
                <ul style="background-color: #67C23A">
                    <li>本月帐单总额</li>
                    <li>$<span>{{tomonth}}</span></li>
                </ul>
                <ul style="background-color: #FFBB06">
                    <li>本年账单总额</li>
                    <li>$<span>{{toyear}}</span></li>
                </ul>
            </div>
        </div>
        <div class="block" style="margin:30px 150px">
            <span>请选择日期：</span>
            <el-date-picker
                    v-model="value1"
                    align="right"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                    :picker-options="pickerOptions">
            </el-date-picker>
            <span style="margin-left: 50px">请输入订单号：</span>
            <el-input placeholder="请输入订单号" v-model="input" style="width: 250px"></el-input>
            <el-button icon="el-icon-search" style="margin-left: 50px" @click="SelectDate(value1,input)" circle></el-button>
            <!--<el-button type="info" style="margin-left: 50px" @click="SelectDate(value1,input)">查询</el-button>-->
        </div>
        <div style="margin-top: 50px">
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        label="订单ID"
                        width="80">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{scope.row.id}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="用户ID"
                        width="80">.
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.userid }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="订单价格"
                        width="80">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.pricetotal }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="订单状态"
                        width="80">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.state }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="收货人"
                        width="80">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.receiver}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="手机号"
                        width="130">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.phone }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="下单时间"
                        width="130">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.createordertime }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="结算时间"
                        width="130">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.endtime }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="配送时间"
                        width="130">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.deliverytime }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="用户留言"
                        width="130">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.leaveword }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="姓名"
                        width="80">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>姓名: {{ scope.row.receiver }}</p>
                            <p>住址: {{ scope.row.adress}}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.receiver }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block" style="margin-left: 250px">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage3"
                        :page-size="100"
                        layout="prev, pager, next, jumper"
                        :total="1000">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "particular_profit",
        data() {
            return {
                dialogFormVisible: true,
                //下拉框
                store: {
                    storeid: '',
                    name: '',
                    region: ''
                },
                //今日账单总额
                today: '',
                //本周帐单总额
                toweek: '',
                //本月帐单总额
                tomonth: '',
                //本年账单总额
                toyear: '',
                //订单详细信息
                tableData: [],
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                value1: '',
                input: ''
            }
        },
        mounted() {
            this.drawLine();
            this.option
        },
        methods: {
            drawLine: function () {
                //修改数据后重新调用他的加载方法
            },
            reason: function () {
                //获取今日
                this.axios.post("/Orders/QueryDay", this.store.storeid).then(response => {
                    if (response.data == null) {
                        this.$alert("本日为空");
                    } else {
                        this.today = response.data;
                    }
                });
                //获取本月
                this.axios.post("/Orders/QueryMonth", this.store.storeid).then(response => {
                    if (response.data == null) {
                        this.$alert("本月为空");
                    } else {
                        this.tomonth = response.data;
                    }
                });
                //获取本周
                this.axios.post("/Orders/QueryWeek", this.store.storeid).then(response => {
                    if (response.data == null) {
                        this.$alert("本周为空！");
                    } else {
                        this.toweek = response.data;
                    }
                });
                //获取本年
                this.axios.post("/Orders/QueryYear", this.store.storeid).then(response => {
                    if (response.data == null) {
                        this.$alert("本年为空！");
                    } else {
                        this.toyear = response.data;
                    }
                });
            },
            open() {
                this.$alert('请先选择店铺!!!', '友情提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                            message: `action: ${action}`
                        });
                    }
                })
            },
            SelectDate() {
                this.axios.get("/Orders/selectAllDate", {params: {
                        createordertime: this.value1,
                        id: this.input
                    }
                }).then(response => {
                    if (response.data == null) {
                        this.$alert("条件筛选值为空");
                    } else {
                        this.tableData = response.data;
                    }
                })
            }

        },
        created() {
            //获取下拉框
            this.open();
            this.axios.post("/Stores/QueryAllStores").then(response => {
                if (response.data == null) {
                    this.$alert("下拉框空值");
                } else {
                    this.store = response.data;
                }
            });
            this.axios.post("/Orders/QueryOrders").then(response => {
                if (response.data == null) {
                    this.$alert("订单信息为空");
                } else {
                    this.tableData = response.data;
                }
            });

        }
    }
</script>

<style scoped>
    li {
        list-style: none;
    }

    .messsageList ul {
        padding: 5px 20px 0px 20px;
        border-radius: 6px;
    }

    .messsageList ul li:nth-of-type(2) {
        font-size: 24px;
    }

    .messsageList ul li {
        color: white;
        font-size: 14px;
        text-align: center;
    }


    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 50px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 20%;
    }
</style>